Loafacto Hub 문서

Appearance

Loafacto 문서/참고 문서/web-ui 문서/Supabase 프로젝트 생성 및 웹 앱 설정 가이드

Supabase 프로젝트 생성 및 웹 앱 설정 가이드 ​

Loafacto-Hub web-ui에서 로그인·회원가입·프로필(닉네임/사진)을 쓰려면 Supabase 프로젝트를 만들고, URL과 API 키를 앱에 넣어야 합니다.

1. Supabase 프로젝트 만들기 ​

  1. Supabase에 로그인 후 Start your project 로 대시보드에 접속합니다.
  2. New project 클릭.
  3. 다음을 입력한 뒤 Create new project 로 생성합니다.
    • Organization: 본인 조직 선택 (없으면 새로 생성).
    • Name: 프로젝트 이름 (예: loafacto-hub).
    • Database Password: DB 비밀번호 (안전하게 저장해 두세요).
    • Region: 가까운 리전 선택 (예: Northeast Asia (Seoul)).

프로젝트가 준비될 때까지 1~2분 정도 걸릴 수 있습니다.

2. URL과 API 키 확인하기 ​

  1. 왼쪽 메뉴에서 Settings (톱니바퀴) → API 로 이동합니다.
  2. Project URL 과 Project API keys 를 확인합니다.
    • Project URL: https://xxxxxxxxxxxx.supabase.co 형태입니다.
    • anon public 키: 공개용 클라이언트 키입니다. 이 키를 사용합니다.
      • service_role 키는 서버 전용이며, 웹 앱이나 클라이언트 코드에 넣으면 안 됩니다.

이 두 값(URL + anon key)을 복사해 두세요.

3. 인증(Authentication) URL 설정 (선택이지만 권장) ​

로그인/회원가입 후 리다이렉트와 비밀번호 재설정 링크가 올바른 도메인으로 가도록 설정합니다.

  1. 왼쪽 메뉴 Authentication → URL Configuration 으로 이동합니다.
  2. Site URL 에 실제 접속 주소를 넣습니다.
    • 로컬 개발: http://localhost:5173 (Vite 기본 포트)
    • 배포 도메인: https://your-domain.com 등
  3. Redirect URLs 에 허용할 주소를 추가합니다.
    • 로컬: http://localhost:5173/**
    • 필요 시 http://localhost:5173 만 넣어도 됩니다.
    • 배포 시에는 https://your-domain.com/** 형태로 추가합니다.

저장 후 Authentication → Providers 에서 Email 등 사용할 로그인 방식을 켜 두면 됩니다.

4. 웹 앱(web-ui)에 설정 넣기 ​

  1. 저장소 루트에서 web-ui 앱 폴더로 이동합니다.

    text
    loafacto-hub/apps/web-ui/

  2. .env 파일을 만듭니다 (이미 있으면 수정합니다).

    • .env.example 이 있다면 복사해서 사용해도 됩니다.
      bash
      cp .env.example .env

  3. 아래 두 변수에 2단계에서 복사한 값을 넣습니다.

    env
    VITE_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....
    • VITE_SUPABASE_URL: Project URL 그대로.
    • VITE_SUPABASE_ANON_KEY: anon public 키 그대로 (따옴표 없이 한 줄).

  4. 저장한 뒤, 개발 서버를 다시 띄웁니다.

    bash
    npm run dev
    • Vite는 .env 변경 시 재시작이 필요할 수 있으므로, 변경 후 한 번 다시 실행하는 것이 안전합니다.

5. 주의사항 ​

  • .env 파일에는 비밀 키가 들어가므로 절대 Git에 커밋하지 마세요.
    이 프로젝트에는 이미 .gitignore에 .env가 포함되어 있습니다.
  • .env.example 에는 실제 키 없이 변수 이름과 예시만 넣어 두고, 이 파일만 커밋해 두면 팀원이 어떤 값을 넣어야 하는지 알 수 있습니다.
  • anon key는 브라우저에 노출되어도 괜찮은 공개용 키입니다.
    service_role 키는 서버에서만 사용하고, 클라이언트나 공개 저장소에 넣지 마세요.

6. 이후 설정 (기능별) ​

Supabase 프로젝트와 URL·API 키 설정이 끝나면, 아래 문서대로 DB/Storage를 추가로 설정할 수 있습니다.

문서내용
02. supabase-profiles.sql)프로필(닉네임) 테이블 및 RPC (닉네임 중복 검사·저장)
03. supabase-storage-avatars.md)프로필 사진용 Storage 버킷(avatars) 설정
15. supabase-withdraw-account.sql)회원 탈퇴(profiles.status) 및 RPC

위 순서대로 적용하면, 웹 앱에서 로그인/회원가입, 닉네임 변경, 프로필 사진 변경이 동작합니다.

7. 프로필 저장 시 403 Forbidden이 날 때 ​

PUT .../auth/v1/user 요청이 403 (Forbidden) 이면 Supabase Auth가 사용자 정보 갱신을 거부한 상태입니다.

확인할 것 ​

원인확인 위치조치
이메일 미인증Authentication → Users → 해당 사용자"Confirm email"가 켜져 있으면, Authentication → Providers → Email 에서 "Confirm email"를 끄거나, 사용자에게 인증 메일에서 링크 클릭하도록 안내.
세션 만료(앱에서 확인)로그인한 지 오래됐으면 다시 로그인 후 프로필 저장 시도.
JWT/키 문제Settings → API, .envanon key가 Project API keys의 anon public과 동일한지 확인.

앱 동작 ​

403이 나면 프로필 편집 모달에
"권한이 없거나 세션이 만료되었을 수 있습니다. 다시 로그인한 뒤 시도해 주세요."
메시지가 표시됩니다. 다시 로그인한 뒤 저장을 시도해 보세요.